<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left">
      <el-form-item label="合伙人名称:">
        <el-input v-model="query.partnerName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="团队等级:">
        <el-input v-model="query.partnerGrade" placeholder="团队等级"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button type="danger" @click="dataDelete">清空</el-button>
      </el-form-item>
    </el-form>
    <el-form style="text-align: left">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          v-no-more-click
          @click="updateFun"
          >更新</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="partnerName"
        label="合伙人名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="teamName"
        label="团队名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="teamBrief"
        label="团队简介"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="teamAddress"
        label="团队地址"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="teamNotice"
        label="团队公告"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="teamStatus"
        label="团队状态"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="partnerGrade"
        label="团队等级"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="currentNum"
        label="当前人数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="maxNum"
        label="上限人数"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTeamPage, postTeamUpdate } from "../../../src/assets/js/api";

export default {
  name: "Team",
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        partnerName: "",
        partnerGrade:""
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      partnerGradeData: [],
    };
  },
  created() {
    this.getList();
    // this.partnerGrade();
  },
  methods: {
    // 筛选部分搜索功能!
    queryData() {
      this.query.pageNo="1";
      this.getList();
    },
    //筛选条件清除功能!
    dataDelete() {
      this.query.partnerName = "";
      this.query.partnerGrade = "";
      this.getList();
    },
    // 分页查询
    getList() {
      getTeamPage(this.query).then((res) => {
        if (res.code == 200) {
          res.data;
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message(res.message);
        }
      });
    },
    // 更新
    updateFun() {
      postTeamUpdate().then((res) => {
        if (res.code == 200) {
          this.query.pageSize = 10;
          this.query.pageNo = 1;
          this.getList();
        } else {
          this.$message(res.message);
        }
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
  },
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 10px 0;
}
::v-deep .el-button {
  width: 100px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.box {
  position: relative;
  background: #fff;
  padding: 20px 20px 50px 20px;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
